<!-- 实时定位 -->
<template>
  <div class="homePage">
    <split-pane :min-percent="1" :default-percent="treePercent" split="vertical" :hiddenRightBtn="true">
      <template slot="paneL">
        <div class="treeArea">
          <vxe-pulldown ref="xDown2" style="width: 100%;" transfer placement="bottom">
            <template #default>
              <div class="header_search_bar">
                <div class="Toolbar_toolbar_7SMZD Toolbar_toolbar_small_3YfCk">
                  <div class="Toolbar_left_ZORKd Toolbar_left_small_nl0yC" style="width: 100%" >
                    <button type="button" class="Button_btn_nFMrU">
                      <i class="el-icon-search" style="font-size: 16px"></i>
                    </button>
                    <div class="SearchBox_container_3CVB7 SearchBox_border_izcjR" style="width: calc(100% - 71px);" >
                      <div class="SearchBox_clear_1qqjk" v-show="searchValue" @click="clearSearch">
                        <i></i><i class="el-icon-close"></i>
                      </div>
                      <div style="overflow: hidden">
                        <input type="text" placeholder="人员名称" class="SearchBox_input_3l9bT" v-model="searchValue" @focus="$refs.xDown2.showPanel()" />
                      </div>
                    </div>
                    <button type="button" class="Button_btn_nFMrU" style="margin-left: -1px" @click="refreshZTree" >
                      <i class="el-icon-refresh-right" style="font-size: 16px" ></i>
                    </button>
                    <button type="button" class="Button_btn_nFMrU" style="margin-left: -1px; display: none;" >
                      <i class="el-icon-setting" style="font-size: 16px"></i>
                    </button>
                  </div>
                </div>
              </div>
            </template>
            <template #dropdown>
              <div class="my-dropdown2">
                <vxe-list height="240" class="SearchBox_dropdown" :loading="false" :data="searchTableData">
                  <template #default="{ items }">
                    <ul class="ztree" v-for="(item,index) in items" :key="index">
                      <li class="SearchBox_option_item" @click="() => selectNode(item.id)" style="background-color: rgb(255, 255, 255);">
                        <span :class="`button ${item.type == 'Device' ? 'SearchBox_option_item_car' : 'SearchBox_option_item_department'}`">
                        </span>
                        {{item.title}}-{{`(${item.id})`}}
                      </li>
                    </ul>
                  </template>
                </vxe-list>
              </div>
            </template>
          </vxe-pulldown>
          <div class="tree">
            <ul id="tree_2020" class="ztree"></ul>
          </div>
        </div>
      </template>

      <template slot="paneR">
        <split-pane split="horizontal" :default-percent="65" :min-percent="1">
          <template slot="paneL">
            <div class="map">
              <div
                class="bm-view-big"
                id="mapChart"
                style="width: 100%; height: 100%"
              ></div>
            </div>
          </template>
          <template slot="paneR">
            <div class="tableArea">
              <vxe-table
                border
                stripe
                highlight-hover-row
                highlight-current-row
                ref="xTable"
                height="auto"
                :auto-resize="true"
                :data="tableData"
                show-overflow
                size="mini"
                resizable
                @cell-click="currentChange" 
                >
                <vxe-table-column type="seq" width="50" title="序号" fixed="left" align="center"></vxe-table-column>
                <vxe-table-column field="dirct" width="50" title="状态" fixed="left" align="center">
                  <template #default="{ row }">
                    <span> 
                      <img :style="`max-width: 20px; max-height: 20px; vertical-align: middle;transform: rotateZ(${row.dirct}deg);`" :src="car7">
                    </span>
                  </template>
                </vxe-table-column>
                <vxe-table-column field="createdTime" width="150" title="定位时间" align="center"></vxe-table-column>
                <vxe-table-column field="speed" width="80" title="行驶速度" align="right">
                  <template #default="{ row }">
                    <span>{{ row.speed }}km/h </span>
                  </template>
                </vxe-table-column>
                <vxe-table-column field="mile" width="100" title="行驶里程" align="right">
                  <template #default="{ row }">
                    <span>{{ formatMile(row.mile) }}km </span>
                  </template>
                </vxe-table-column>
                <vxe-table-column field="addr" title="地理位置" min-width="300" show-overflow></vxe-table-column>
                <vxe-table-column field="empty" title="" show-overflow></vxe-table-column>

                <template #empty>
                  <span >
                  </span>
                </template>
              </vxe-table>
            </div>
          </template>
        </split-pane>
      </template>
    </split-pane>
  </div>
</template>

<script>
import { formatMile } from "_util";
import car7 from '../assets/img/car7.png';
import "../utils/zTree/jquery.ztree.core.min.js";
import "../utils/zTree/jquery.ztree.excheck.min.js";

var map, carNo, CheckedNodes = [], markerList = [], openIng = false;

// 关闭信息窗体
window.closeInfoWindow = function closeInfoWindow(type) {
  if (type == "closeOpen") openIng = false;
  if (window.map) window.map.clearInfoWindow();
  if (type == "closeMarker" && window.clearMarker) window.clearMarker();
};

function getDirection(angle) {
  let direction = "";
  if(angle < 90) {
    direction = "东偏北" + (90 - angle) + "°";
  }
  if(angle > 90 && angle < 180) {
    direction = "东偏南" + (angle - 90) + "°";
  }
  if(angle > 180 && angle < 270) {
    direction = "西偏南" + (angle - 180) + "°";
  }
  if(angle > 270) {
    direction = "西偏北" + (angle - 270) + "°";
  }
  return direction;
}

//构建自定义信息窗体
function createInfoWindow(marker, type) {
  var info = document.createElement("div");
  info.className = "custom-info input-card content-window-card";

  // 定义中部内容
  var middle = document.createElement("div");
  middle.className = "info-middle";
  middle.style.backgroundColor = "white";
  let content = `
    <div style="border: 1px solid rgb(64, 150, 209);box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px 2px;visibility: visible; box-sizing: border-box; font-size: 12px; text-align: left;">
      <div style="box-sizing: border-box; outline: none; pointer-events: auto; position: relative; z-index: 1; background-color: rgb(255, 255, 255); display: flex; flex-flow: column nowrap; box-sizing: border-box; color: rgb(50, 50, 50); line-height: 1.3em;">
        <div>
          <div style="box-sizing: border-box; height: 30px; color: rgb(255, 255, 255); width: 100%; padding: 5px; background-color: rgb(64, 150, 209);">
            <span style="float: left; line-height: 20px;">
              ${marker?.otherData?.createdTime}
            </span>
            <i onclick="closeInfoWindow('${type || ''}')" class="el-icon-close" style="margin-left: 5px; float: right; font-size: 18px; cursor: pointer;"></i>
          </div>
          <table border="0" cellspacing="0" cellpadding="0" width="100%" style="line-height: 1;">
            <tr>
              <td colspan="3" style="overflow: hidden; white-space: nowrap; width: 50.1%; max-width: 200px; min-width: 183px;">
                <div is-label="true" class="GpsHisContent_label_2Qgp_ GpsHisContent_item_first_1e92R" style="box-sizing: border-box; border-left-color: rgb(214, 214, 214); border-left-width: 0px; color: rgb(44, 120, 191); width: 60px;">
                  人员名称
                </div>
                <div class="GpsHisContent_text_3nB_G GpsHisContent_item_first_1e92R" title="${marker?.otherData?.DriverName}" style="box-sizing: border-box;">
                  ${marker?.otherData?.DriverName}
                </div>
              </td>
              <td colspan="3" style="overflow: hidden; white-space: nowrap; width: 50.1%; max-width: 200px; min-width: 183px;">
                <div is-label="true" class="GpsHisContent_label_2Qgp_ GpsHisContent_item_first_1e92R" style="box-sizing: border-box;border-left-color: rgb(214, 214, 214); border-left-width: 1px; color: rgb(44, 120, 191); width: 60px;">
                  定位经度
                </div>
                <div class="GpsHisContent_text_3nB_G GpsHisContent_item_first_1e92R" title="${marker?.otherData?.lng}" style="box-sizing: border-box;">
                  ${marker?.otherData?.lng}
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="3" style="overflow: hidden; white-space: nowrap; width: 50.1%; max-width: 200px; min-width: 183px;">
                <div is-label="true" class="GpsHisContent_label_2Qgp_" style="box-sizing: border-box; border-left-color: rgb(214, 214, 214); border-left-width: 0px; color: rgb(44, 120, 191); width: 60px;">
                  行驶速度
                </div>
                <div class="GpsHisContent_text_3nB_G" title="${marker?.otherData?.speed} km/h" style="box-sizing: border-box;">
                  ${marker?.otherData?.speed} km/h
                </div>
              </td>
              <td colspan="3" style="overflow: hidden; white-space: nowrap; width: 50.1%; max-width: 200px; min-width: 183px;">
                <div is-label="true" class="GpsHisContent_label_2Qgp_" style="box-sizing: border-box;border-left-color: rgb(214, 214, 214); border-left-width: 1px; color: rgb(44, 120, 191); width: 60px;">
                  定位纬度
                </div>
                <div class="GpsHisContent_text_3nB_G" title="${marker?.otherData?.lat}" style="box-sizing: border-box;">
                  ${marker?.otherData?.lat}
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="3" style="overflow: hidden; white-space: nowrap; width: 50.1%; max-width: 200px; min-width: 183px;">
                <div is-label="true" class="GpsHisContent_label_2Qgp_ GpsHisContent_item_last_3jTpP" style="box-sizing: border-box;border-left-color: rgb(214, 214, 214); border-left-width: 0px; color: rgb(44, 120, 191); width: 60px;">
                  行驶方向
                </div>
                <div class="GpsHisContent_text_3nB_G GpsHisContent_item_last_3jTpP" title="${getDirection(marker?.otherData?.dirct)}" style="box-sizing: border-box;">
                  ${getDirection(marker?.otherData?.dirct)}
                </div>
              </td>
              <td colspan="3" style="overflow: hidden; white-space: nowrap; width: 50.1%; max-width: 200px; min-width: 183px;">
                <div is-label="true" class="GpsHisContent_label_2Qgp_ GpsHisContent_item_last_3jTpP" style="box-sizing: border-box;border-left-color: rgb(214, 214, 214); border-left-width: 1px; color: rgb(44, 120, 191); width: 60px;">
                  行驶里程
                </div>
                <div class="GpsHisContent_text_3nB_G GpsHisContent_item_last_3jTpP" title="${marker?.otherData?.mile} 千米" style="box-sizing: border-box;">
                  ${formatMile(marker?.otherData?.mile)} 千米
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="6" style="width: 100%; border-bottom: 1px solid rgb(214, 214, 214);"></td>
            </tr>
            <tr>
              <td colspan="6" style="overflow: hidden; white-space: nowrap; width: 100.2%; max-width: 360px; min-width: 360px;">
                <div is-label="true" class="GpsHisContent_label_2Qgp_ GpsHisContent_item_first_1e92R GpsHisContent_item_last_3jTpP" style="box-sizing: border-box;border-left-color: rgb(214, 214, 214); border-left-width: 0px; color: rgb(44, 120, 191); width: 60px; height: 72px;">
                  地理位置
                </div>
                <div class="GpsHisContent_text_3nB_G GpsHisContent_item_first_1e92R GpsHisContent_item_last_3jTpP" title="浙江省宁波市海曙区;永丰西路;银润豪景商务广场-61号楼,银润豪景商务广场-6号楼,银润豪景商务广场-55号楼" style="box-sizing: border-box;margin-bottom: -8px;">
                  <p style="margin:0 0 8px 0">${marker?.otherData?.addr?.split(";")[0]}</p>
                  <p style="margin:0 0 8px 0">${marker?.otherData?.addr?.split(";")[1]}</p>
                  <p style="margin:0 0 8px 0">${marker?.otherData?.addr?.split(";")[2]}</p>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  `;
  middle.innerHTML = content;

  info.appendChild(middle);

  // 定义底部内容
  var bottom = document.createElement("div");
  bottom.className = "info-bottom";
  bottom.style.position = "relative";
  bottom.style.top = "-1px";
  bottom.style.margin = "0 auto";
  var sharp = document.createElement("img");
  sharp.src = "https://webapi.amap.com/images/sharp.png";
  bottom.appendChild(sharp);
  info.appendChild(bottom);
  return info;
};

export default {
  name: "page",
  components: {},
  props: {},
  data() {
    return {
      setting: {
        check: {
          enable: true,
        },
        data: {
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "parentId",
            rootPId: 0
          },
        },
        callback: {
          onCheck: this.onTreeCheck,
          onClick: this.onTreeClick
        },
        view: {
          autoCancelSelected: false,
          selectedMulti: false,
        }
      },
      zNodes: [
        
      ],

      treePercent: 25,

      searchValue: "",

      tableData: [],
      currentId: -1,

      intervalTimer: null,
      car7
    };
  },
  // 计算属性
  computed: {
    searchTableData() {
      if (this.searchValue) {
        return this.zNodes.filter(item => item.title.indexOf(this.searchValue) >= 0)
      } else {
        return this.zNodes
      }
    }
  },
  // 方法
  methods: {
    treeToList(tree){
      var queen =[]
      var out =[]
          queen = queen.concat(tree)
      while(queen.length){
        var first = queen.shift()
        if(first.children){
                queen = queen.concat(first.children)
        delete first['children']
        }
        out.push(first)
      }
      return out
    },
    renderTree(callBack) {
      let _this = this;
      let token = localStorage.getItem("pro__Access-Token");
      $.ajax({
        type : "GET",
        url : this.$api.GetDep_Tree,
        beforeSend: function (XMLHttpRequest) {
          XMLHttpRequest.setRequestHeader("Authorization", 'Bearer ' + JSON.parse(token).value);
        },
        data : {},
        success : function(result) {
          let data = [];
          if (result.success) {
            data = _this.treeToList(result.data);
          }
          
          if (data?.length > 0) {
            data.map(item => {
              item.name = item.title;
              item.iconSkin = item.type == 'Org' ? 'pIcon' : 'icon';
              item.isParent = item.type == 'Org';
            })
            _this.zNodes = data;
            $.fn.zTree.init($("#tree_2020"), _this.setting, data);
            callBack && callBack();
          } else {
            _this.$message({
              type: 'error',
              showClose: true,
              message: '未查询到数据！',
              duration: 15000
            });
          }
        },
        //请求失败，包含具体的错误信息
        error : function(e){
          console.log(e.status);
          console.log(e.responseText);
        }
      });
    },
    refreshZTree() {
      $.fn.zTree.destroy();
      this.renderTree(() => {
        this.$message.success('刷新成功！');
        if (CheckedNodes && CheckedNodes.length) {
          let myZTree = $.fn.zTree.getZTreeObj("tree_2020");
          let checkedNodes = [];
          CheckedNodes.map(item => {
            checkedNodes.push(myZTree.getNodeByParam("id", item.id));
            myZTree.expandNode(myZTree.getNodeByParam("id", item.id), true);
            myZTree.checkNode(myZTree.getNodeByParam("id", item.id), true, false);
          })
          CheckedNodes = checkedNodes;
        }
      });
    },
    selectNode(id) {
      this.$refs.xDown2.hidePanel().then(() => {
        let myZTree = $.fn.zTree.getZTreeObj("tree_2020");
        myZTree.getNodeByParam("id", id).getPath().map(item => {
          myZTree.expandNode(item, true)
          myZTree.checkNode(item, true, false);
        })
        myZTree.checkNode(myZTree.getNodeByParam("id", id), true, true);
        let checkedNodes = $.fn.zTree.getZTreeObj("tree_2020").getCheckedNodes(true);
        CheckedNodes = checkedNodes
      })
    },
    onTreeCheck(event, treeId, treeNode) {
      let myZTree = $.fn.zTree.getZTreeObj("tree_2020")
      let checkedNodes = myZTree.getCheckedNodes(true);
      if (treeNode.checked) { // 选中节点
        CheckedNodes.push(...checkedNodes.filter(item => !CheckedNodes.some(item1 => item1.id == item.id)))
        openIng = true;
      } else { // 取消选中节点
        let cancelCheckedNodes = CheckedNodes.filter(item => !checkedNodes.some(item2 => item2.id == item.id))
        CheckedNodes = CheckedNodes.filter(item => checkedNodes.some(item2 => item2.id == item.id))
        markerList.map(marker => {
          if (cancelCheckedNodes.some(cancelCheckedNodeItem => cancelCheckedNodeItem.tmnCode == marker?.otherData?.tmnCode)) {
            marker.setMap(null);
            if (this.currentId == marker?.otherData?.tmnCode) {
              closeInfoWindow();
            }
          }
        })
        markerList = markerList.filter(marker => !cancelCheckedNodes.some(cancelCheckedNodeItem => cancelCheckedNodeItem.tmnCode == marker?.otherData?.tmnCode))
      }
      myZTree.selectNode(myZTree.getNodeByParam("id", treeNode.id));
      this.currentId = treeNode.tmnCode;
      this.queryData((tableData) => {
        if (treeNode.isParent) {
          if (treeNode.checked) map.setFitView();
          closeInfoWindow();
        }
      });
    },
    onTreeClick(event, treeId, treeNode) {
      if (markerList.some(marker => marker?.otherData?.tmnCode == treeNode.tmnCode)) this.currentId = treeNode.tmnCode;
      markerList.map(marker => {
        if (marker?.otherData?.tmnCode == treeNode.tmnCode) {
          marker.infoWindow.open(map, marker.getPosition())
          map.panTo([marker?.otherData?.lng, marker?.otherData?.lat]);
        }
      })
      this.queryData();
    },
    clearSearch() {
      this.searchValue = "";
    },
    inintMap() {
      let _this = this;

      map = new AMap.Map("mapChart", {
        center: [121.54878, 29.85006],
        zoom: 14  ,
        resizeEnable: true,
        // mapStyle: "amap://styles/c6c6d59dafaa271d12b194a5e5b96910",
      });
      window.map = map;
      map.clearMap();
      // 为地图添加工具
      AMap.plugin([
        'AMap.ToolBar',
        'AMap.Scale',
      ], function(){
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar({
            // 简易缩放模式，默认为 false
            liteStyle: true
        }));
        map.addControl(new AMap.Scale());
      });

      map.on("click", function (e) {
        closeInfoWindow();
      });
    },
    currentChange({row}) {
      this.currentId = row.tmnCode;
      openIng = true;
      let rowMarker = markerList.find(marker => marker?.otherData?.tmnCode == row.tmnCode);
      rowMarker?.infoWindow.open(map, rowMarker?.getPosition());
      // let myZTree = $.fn.zTree.getZTreeObj("tree_2020")
      // myZTree.selectNode(myZTree.getNodeByParam("tmnCode", row.tmnCode));
      this.queryData();
    },
    queryData(callBack) {
      let _this = this;
      if (CheckedNodes && CheckedNodes.length > 0) {
        let queryDataVehicleNoList = CheckedNodes && CheckedNodes.filter(item => item.type == 'Device');
        if (queryDataVehicleNoList.length <= 0) {
          return;
        }
        let token = localStorage.getItem("pro__Access-Token");
        $.ajax({
          type : "POST",
          url : this.$api.GetRealTimeByVehicleNos,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Authorization", 'Bearer ' + JSON.parse(token).value);
          },
          contentType: 'application/json',
          data : JSON.stringify({
            TmnCodes: queryDataVehicleNoList.map(item => item.tmnCode).join(","),
          }),
          success : function(data) {
            _this.tableData = [];
            if (data.success && data?.data.length) {
              let tableData = [];
              let tempMarkerList = [];
              data.data.map(item => {
                let tableDataIndex = queryDataVehicleNoList.findIndex(queryDataVehicleNoListItem => queryDataVehicleNoListItem.tmnCode == item.tmnCode);
                // // GPS 转高德地图坐标
                // AMap.convertFrom([item.lng, item.lat], "gps", function (status, result) {
                //   if (result.info === 'ok') {
                //     item.lng = result.locations[0].R;
                //     item.lat = result.locations[0].Q;
                    item.lng = item.gaoDe_lng;
                    item.lat = item.gaoDe_lat;
                    let findMarkerInList = markerList.find(marker => marker.otherData.tmnCode == item.tmnCode)
                    item.DriverName = queryDataVehicleNoList[tableDataIndex].title;
                    if (!(item.createdTime == findMarkerInList?.otherData?.createdTime)) {
                      findMarkerInList && findMarkerInList.setMap(null);
                      findMarkerInList = null;
                      // 点标记显示内容，HTML要素字符串
                      let markerContent =  `<div style="width: 31px; height: 31px;">
                          <img style="top: 16px; position: relative; left: -5px; transform: rotateZ(${item.dirct}deg);" src="${car7}">
                          <p class="marker_car_num">${item.DriverName}&nbsp;&nbsp;(${item.speed}KM)</p>
                        </div>`; 
                      let marker = new AMap.Marker({
                        position: new AMap.LngLat(item.lng, item.lat),
                        content: markerContent
                      })
                      marker.otherData = item;
                      marker.setMap(map);
                      let infoWindow = new AMap.InfoWindow({
                        isCustom: true, //使用自定义窗体
                        content: "",
                        offset: new AMap.Pixel(18, 0),
                      });
                      infoWindow.setContent(createInfoWindow(marker, 'closeOpen'));
                      
                      AMap.event.addListener(marker, "click", function () {
                        openIng = true;
                        _this.currentId = marker?.otherData?.tmnCode;
                        _this.queryData();
                        infoWindow.setContent(createInfoWindow(marker, 'closeOpen'));
                        infoWindow.open(map, marker.getPosition());
                      });
                      marker.infoWindow = infoWindow;
                      tempMarkerList.push(marker);
                      if (tableDataIndex >= 0) {
                        tableData[tableDataIndex] = item;
                      } else {
                        tableData.push(item)
                      }
                      
                      if (_this.currentId == item.tmnCode && openIng) {
                        map.clearInfoWindow();
                        infoWindow.open(map, marker.getPosition());
                        map.panTo([item.lng, item.lat]);
                      }
                    } else {
                      if (tableDataIndex >= 0) {
                        tableData[tableDataIndex] = item;
                      } else {
                        tableData.push(item)
                      }
                      tempMarkerList.push(findMarkerInList);
                    }
                //   }
                // })
              })
              _this.tableData = tableData;
              markerList = tempMarkerList;
              _this.$refs.xTable.setCurrentRow(_this.tableData.find(item => item?.tmnCode == _this.currentId));
              _this.$refs.xTable.scrollToRow(_this.tableData.find(item => item?.tmnCode == _this.currentId));
              callBack && callBack(_this.tableData)
            }
          },
          //请求失败，包含具体的错误信息
          error : function(e){
            console.log(e.status);
            console.log(e.responseText);
          }
        });
      } else {
        // map.clearInfoWindow();
        // map.clearMap();
        _this.tableData = [];
        // _this.queryAllGarbagelist();
      }
    },
    queryAllGarbagelist() {
      let _this = this;
      // $.ajax({
      //     type : "GET",
      //     url : this.$api.GetAllGarbagelist,
      //     data : { },
      //     success : function(result) {
      //       let data = JSON.parse(result);
      //       console.log("🚀 ~ file: RealTimePositioning.vue ~ line 530 ~ queryAllGarbagelist ~ data", data);
            
      //       //构建自定义信息窗体
      //       function createGarbageInfoWindow(marker, type) {
      //         var info = document.createElement("div");
      //         info.className = "custom-info input-card content-window-card";

      //         // 定义中部内容
      //         var middle = document.createElement("div");
      //         middle.className = "info-middle";
      //         middle.style.backgroundColor = "white";
      //         let content = `
      //           <div style="border: 1px solid rgb(64, 150, 209);box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px 2px;visibility: visible; box-sizing: border-box; font-size: 12px; text-align: left;">
      //             <div style="box-sizing: border-box; outline: none; pointer-events: auto; position: relative; z-index: 1; background-color: rgb(255, 255, 255); display: flex; flex-flow: column nowrap; box-sizing: border-box; color: rgb(50, 50, 50); line-height: 1.3em;">
      //               <div>
      //                 <div style="box-sizing: border-box; height: 30px; color: rgb(255, 255, 255); width: 100%; padding: 5px; background-color: rgb(64, 150, 209);">
      //                   <span style="float: left; line-height: 20px;">
      //                     ${marker?.GarbageName}
      //                   </span>
      //                   <i onclick="closeInfoWindow('${type || ''}')" class="el-icon-close" style="margin-left: 5px; float: right; font-size: 18px; cursor: pointer;"></i>
      //                 </div>
      //                 <table border="0" cellspacing="0" cellpadding="0" width="100%" style="line-height: 1;">
      //                   <tr>
      //                     <td colspan="3" style="overflow: hidden; white-space: nowrap; width: 50.1%; max-width: 200px; min-width: 183px;">
      //                       <div is-label="true" class="GpsHisContent_label_2Qgp_ GpsHisContent_item_first_1e92R" style="box-sizing: border-box; border-left-color: rgb(214, 214, 214); border-left-width: 0px; color: rgb(44, 120, 191); width: 60px;">
      //                         点位名称
      //                       </div>
      //                       <div class="GpsHisContent_text_3nB_G GpsHisContent_item_first_1e92R" title="${marker?.GarbageName}" style="box-sizing: border-box;">
      //                         ${marker?.GarbageName}
      //                       </div>
      //                     </td>
      //                   </tr>
      //                   <tr>
      //                     <td colspan="6" style="width: 100%; border-bottom: 1px solid rgb(214, 214, 214);"></td>
      //                   </tr>
      //                   <tr>
      //                     <td colspan="3" style="overflow: hidden; white-space: nowrap; width: 50.1%; max-width: 200px; min-width: 183px;">
      //                       <div is-label="true" class="GpsHisContent_label_2Qgp_ GpsHisContent_item_first_1e92R" style="box-sizing: border-box; border-left-color: rgb(214, 214, 214); border-left-width: 0px; color: rgb(44, 120, 191); width: 60px;">
      //                         督导员
      //                       </div>
      //                       <div class="GpsHisContent_text_3nB_G GpsHisContent_item_first_1e92R" title="${marker?.otherData?.DriverName}" style="box-sizing: border-box;">
      //                         ${marker?.otherData?.DriverName}
      //                       </div>
      //                     </td>
      //                   </tr>
      //                   <tr>
      //                     <td colspan="6" style="width: 100%; border-bottom: 1px solid rgb(214, 214, 214);"></td>
      //                   </tr>
      //                   <tr>
      //                     <td colspan="3" style="overflow: hidden; white-space: nowrap; width: 50.1%; max-width: 200px; min-width: 183px;">
      //                       <div is-label="true" class="GpsHisContent_label_2Qgp_ GpsHisContent_item_first_1e92R" style="box-sizing: border-box; border-left-color: rgb(214, 214, 214); border-left-width: 0px; color: rgb(44, 120, 191); width: 60px;">
      //                         餐厨垃圾
      //                       </div>
      //                       <div class="GpsHisContent_text_3nB_G GpsHisContent_item_first_1e92R" title="${marker?.otherData?.CanChuBucketNum}桶" style="box-sizing: border-box;">
      //                         ${marker?.otherData?.CanChuBucketNum}桶
      //                       </div>
      //                     </td>
      //                   </tr>
      //                   <tr>
      //                     <td colspan="6" style="width: 100%; border-bottom: 1px solid rgb(214, 214, 214);"></td>
      //                   </tr>
      //                   <tr>
      //                     <td colspan="3" style="overflow: hidden; white-space: nowrap; width: 50.1%; max-width: 200px; min-width: 183px;">
      //                       <div is-label="true" class="GpsHisContent_label_2Qgp_ GpsHisContent_item_first_1e92R" style="box-sizing: border-box;border-left-color: rgb(214, 214, 214); border-left-width: 1px; color: rgb(44, 120, 191); width: 60px;">
      //                         其他垃圾
      //                       </div>
      //                       <div class="GpsHisContent_text_3nB_G GpsHisContent_item_first_1e92R" title="${marker?.otherData?.QiTBucketNum}桶" style="box-sizing: border-box;">
      //                         ${marker?.otherData?.QiTBucketNum}桶
      //                       </div>
      //                     </td>
      //                   </tr>
                       
      //                 </table>
      //               </div>
      //             </div>
      //           </div>
      //         `;
      //         middle.innerHTML = content;

      //         info.appendChild(middle);

      //         // 定义底部内容
      //         var bottom = document.createElement("div");
      //         bottom.className = "info-bottom";
      //         bottom.style.position = "relative";
      //         bottom.style.top = "-1px";
      //         bottom.style.margin = "0 auto";
      //         var sharp = document.createElement("img");
      //         sharp.src = "https://webapi.amap.com/images/sharp.png";
      //         bottom.appendChild(sharp);
      //         info.appendChild(bottom);
      //         return info;
      //       };

      //       let garbageInfoWindow = new AMap.InfoWindow({
      //         isCustom: true, //使用自定义窗体
      //         content: "",
      //         offset: new AMap.Pixel(18, 0),
      //       });

      //       if (data.code == 0 && data?.data?.length > 0) {
      //         data.data.map(item => {
      //           var marker = new AMap.Marker({
      //             position: new AMap.LngLat(item.Longitude, item.Latitude),
      //             icon: new AMap.Icon({
      //               image: _this.$api.doMain + item.IconUrl, // Icon的图像
      //               imageOffset: new AMap.Pixel(5, 10), // 图像相对展示区域的偏移量，适于雪碧图等
      //               imageSize: new AMap.Size(15, 20), // 根据所设置的大小拉伸或压缩图片
      //             }),
      //             title: item.GarbageName,
      //           });
      //           // 公厕名称
      //           marker.GarbageName = item.GarbageName;
      //           marker.otherData = item;
      //           map.add(marker);
      //           AMap.event.addListener(marker, "click", function() {
      //             garbageInfoWindow.setContent(createGarbageInfoWindow(marker));
      //             garbageInfoWindow.open(map, marker.getPosition());
      //           })
      //         })
      //       }
      //     }
      // })
    
    },
    
    formatMile: formatMile
  },
  // 观察属性
  watch: {},
  beforeRouteEnter(to, from, next) {
    next(/* vm => {} */);
  },
  beforeRouteUpdate(to, from, next) {
    next();
  },
  beforeRouteLeave(to, from, next) {
    next();
  },
  beforeCreate() {
    // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
  },
  created() {
    // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
  },
  beforeMount() {
    // 生命周期钩子：模板编译/挂载之前
  },
  mounted() {
    // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
    this.renderTree();
    this.inintMap();
    // 初始化每2秒请求一次实时位置 改为1分钟 2024-02-26
    this.intervalTimer = setInterval(() => {
      this.queryData();
    }, 1 * 1000 * 60)
    // 初始化左侧树的宽度为min：250px max：95%宽度
    this.treePercent = Math.ceil((250/$(document).width())*100) > 95 ? 95 : Math.ceil((250/$(document).width())*100);

    this.queryAllGarbagelist();
    
  },
  beforeUpate() {
    // 生命周期钩子：组件更新之前
  },
  updated() {
    // 生命周期钩子：组件更新之后
  },
  activated() {
    // 生命周期钩子：keep-alive 组件激活时调用
  },
  deactivated() {
    // 生命周期钩子：keep-alive 组件停用时调用
  },
  beforeDestroy() {
    // 生命周期钩子：实例销毁前调用
    clearInterval(this.intervalTimer);
  },
  destroyed() {
    // 生命周期钩子：实例销毁后调用
  },
  errorCaptured(err, vm, info) {
    // 生命周期钩子：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。
    console.log(err, vm, info);
  },
};
</script>
<style lang="less" scoped>
.homePage {
  height: calc(~"100% - 20px");
  width: calc(~"100% - 20px");
  background-color: rgb(232, 234, 237);
  padding: 10px;
  .treeArea {
    width: calc(~"100% - 7px");
    height: calc(~"100% - 2px");
    overflow: auto;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(174, 186, 197);
    background: #e8eaed;
    .Toolbar_toolbar_7SMZD {
      background-color: rgb(232, 234, 237);
      border-width: 0px 0px 1px;
      border-top-style: initial;
      border-right-style: initial;
      border-bottom-style: solid;
      border-left-style: initial;
      border-color: rgb(214, 214, 214);
      border-image: initial;
      .Toolbar_left_ZORKd {
        .Button_btn_nFMrU {
          border-color: rgb(214, 214, 214);
          background-color: rgb(232, 234, 237);
          height: 32px;
          padding: 2px 0px 0px;
          border-width: 1px;
          cursor: pointer;
          border-radius: 0px;
          width: 32px;
          &:hover {
            background-color: rgb(255, 255, 255);
            color: rgb(64, 150, 209);
          }
        }
        .SearchBox_container_3CVB7 {
          height: 30px;
          border-color: rgb(214, 214, 214);
          margin-left: -1px;
          width: calc(100% - 103px);
        }
      }
    }
    .tree {
      overflow: auto;
      background: #fff;
      height: calc(100% - 43px);
    }
    .qury_area {
      width: 100%;
      border-top: 1px solid rgb(174, 186, 197);
      padding: 5px;
      position: relative;
      box-sizing: border-box !important;
      font-size: 12px;
      background: #fff;
      * {
        box-sizing: border-box !important;
      }
      .start_btn {
        background-color: rgb(255, 255, 255);
        border-color: rgb(174, 186, 197);
        height: 32px;
        padding: 0px;
        border-width: 1px;
        cursor: pointer;
        border-radius: 0px;
        position: absolute;
        width: 32px;
        left: 0px;
        bottom: 0px;
      }
      .stop_btn {
        background-color: rgb(255, 255, 255);
        border-color: rgb(174, 186, 197);
        height: 32px;
        padding: 0px;
        border-width: 1px;
        border-radius: 0px;
        position: absolute;
        left: 31px;
        bottom: 0px;
        width: 32px;
        color: rgb(112, 112, 112);
      }
      .action_btn {
        background-color: rgb(255, 255, 255);
        border-color: rgb(174, 186, 197);
        height: 32px;
        padding: 0px;
        border-width: 1px;
        cursor: pointer;
        border-radius: 0px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 32px;
      }
      .Button_disabled_GJexr {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: hsla(0,0%,92.2%,.6);
        opacity: .6;
        filter: alpha(opacity=60);
        cursor: not-allowed;
      }
      .play_slider {
        position: absolute;
        left: 62px;
        bottom: 0px;
        right: 31px;
        border: 1px solid rgb(174, 186, 197);
        height: 32px;
        background-color: rgb(255, 255, 255);
        padding: 0 15px;
        /deep/.el-slider__runway {
          margin: 12px 0;
          .el-slider__button-wrapper {
            height: 25px;
            width: 25px;
            top: -10px;
            .el-slider__button {
              width: 8px;
              height: 8px;
            }
          }
        }
      }
      .InputDateTime {
        outline: none;
        display: inline-block;
        white-space: nowrap;
        background-color: #fff;
        position: relative;
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        border-style: solid;
        border-width: 1px;
        height: 32px;
        border-color: rgb(174, 186, 197);;
        width: 100%;
        margin-top: -1px;
        &:hover {
          border-color: rgb(64, 150, 209);
          z-index: 2549;
        }
        .InputDateTime_label {
          font-size: 12px;
          float: left;
          padding: 0 6px;
          border-right-style: solid;
          border-right-width: 0;
          white-space: nowrap;
          height: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          border-right-color: rgb(214, 214, 214);
          background-color: rgb(232, 234, 237);
          width: 60px;
        }
        .InputDateTime_datatime {
          font-size: 13px;
          white-space: nowrap;
          overflow: hidden;
          cursor: pointer;
          height: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }
        /deep/.vxe-input--inner {
          border: none;
        }
        /deep/.vxe-input--date-picker-icon {
          font-size: 16px;
          transform: translate(-11px,-50%);
        }
        /deep/.vxe-input:not(.is--disabled).is--active .vxe-input--inner {
          border: none;
        }
      }
      .query_search_btn {
        margin-top: 5px;
        width: 100%;
        border-radius: 0;
        height: 32px;
        /deep/i {
          font-size: 16px;
        }
        /deep/span {
          position: relative;
          top: -2px;
        }
      }
    }
  }
  .map {
    width: calc(~"100% - 7px");
    height: calc(~"100% - 7px");
    margin-left: 5px;
    background: #fff;
     border-style: solid;
    border-width: 1px;
    border-color: rgb(174, 186, 197);
  }
  .tableArea {
    width: calc(~"100% - 7px");
    height: calc(~"100% - 7px");
    margin-left: 5px;
    margin-top: 5px;
    background: #fff;
     border-style: solid;
    border-width: 1px;
    border-color: rgb(174, 186, 197);
  }
  .line_btn {
    z-index: 999;
  }
}
</style>